import React, {useEffect} from 'react'
import { useState } from 'react';

export default function Effect() {

  //调用 useEffect
  //等效于 componentDidMount 与 componentDidUpdate
  // useEffect(() => {
  //   console.log('执行了~~');
  // });

  //useEffect 可以调用多次
  // useEffect(() => {
  //   console.log('你心中无爱，怎会懂珍惜二字')
  // });

  //声明状态
  let [count, setCount] = useState(0);

  //单独模拟 componentDidMount
  // useEffect(() => { 
  //   console.log('我只在组件挂载之后执行~~');
  // }, []);// []  作用设置哪些状态修改之后, 执行回调

  //模拟 componentWillUnmount
  useEffect(() => {
    //返回的函数相当于是 componentWillUnmount
    return () => { 
      console.log('组件将 要卸载~~~');
    }
  },[]);

  //声明函数
  let add = () => {
    setCount(count + 1);
  }

  return (
    <div>
      <h2>{count}</h2>
      <button onClick={add}>新增</button>
    </div>
  )
}
